﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]>
<html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <!-- Basic Page Needs -->
    <meta charset="UTF-8">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>Techno Store - Shop Checkout</title>

    <meta name="author" content="CreativeLayers">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Boostrap style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

    <!-- Reponsive -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">

    <link rel="shortcut icon" href="/favicon/favicon.png">

</head>
<body class="header_sticky">
<div class="boxed">

    <div class="overlay"></div>

    <!-- Preloader -->
    <div class="preloader">
        <div class="clear-loading loading-effect-2">
            <span></span>
        </div>
    </div><!-- /.preloader -->


    <div th:insert="~{header ::#header}"></div>

    <section class="flat-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="breadcrumbs">
                        <li class="trail-item">
                            <a href="/page/index" title="">首页</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-item">
                            <a href="/page/food" title="">商店</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-end">
                            <a  title="">订单明细</a>
                        </li>
                    </ul><!-- /.breacrumbs -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-breadcrumb -->

    <section class="flat-checkout">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="box-checkout">
                        <h3 class="title">购物车</h3>

                        <form onsubmit="return false" id="checkoutForm" method="get" class="checkout" accept-charset="utf-8">
                            <div class="billing-fields">
                                <div class="fields-title">
                                    <h3>购物车明细</h3>
                                    <span></span>
                                    <div class="clearfix"></div>
                                </div><!-- /.fields-title -->
                                <div class="fields-content">
                                    <div class="field-row">
                                        <p class="field-one-half">
                                            <label for="reciver">收货人 *</label>
                                            <input type="text" id="reciver" name="reciver" placeholder="例：叶紫">
                                        </p>
                                        <p class="field-one-half">
                                            <label for="last-name">手机号 *</label>
                                            <input type="text" id="last-name" name="phone" placeholder="例：18694856215">
                                        </p>
                                        <div class="clearfix"></div>
                                    </div>

                                    <div class="field-row">
                                        <p class="field-one-half">
                                            <label for="email-address">电子邮件地址 *</label>
                                            <input type="email" placeholder="例：18694856215@163.com" id="email-address" name="email">
                                        </p>
                                        <p class="field-one-half">
                                            <label for="code">邮政编码 *</label>
                                            <input type="text" id="code" placeholder="例：450000" name="code">
                                        </p>
                                        <div class="clearfix"></div>
                                    </div>

                                    <div class="field-row">
                                        <p class="field-one-half">
                                            <label for="state-country">省 *</label>
                                            <input type="text" id="state-country" placeholder="例：河南省" name="sheng">
                                        </p>

                                        <p class="field-one-half">
                                            <label for="city">市 *</label>
                                            <input type="text" id="city" placeholder="例：商丘市" name="shi">
                                        </p>

                                        <p class="field-one-half">
                                            <label for="post-code">区 / 县 *</label>
                                            <input type="text" id="post-code" placeholder="例：梁园区" name="qu">
                                        </p>

                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="field-row">
                                        <label for="address">详细地址 *</label>
                                        <input type="text" id="address" name="addressDetail" placeholder="例：河南省商丘市XXXX">
                                    </div>
                                    <div class="field-row">
                                        <label for="town-city">公司名称 *</label>
                                        <input type="text" id="town-city" placeholder="例：商丘师范" name="companyName">
                                    </div>

                                    <div class="field-row">
                                        <label for="companyAddress">公司地址 *</label>
                                        <input type="text" id="companyAddress" placeholder="例：" name="companyAddress">
                                    </div>

                                </div>
                            </div><!-- /.billing-fields -->
                        </form><!-- /.checkout -->
                    </div><!-- /.box-checkout -->
                </div><!-- /.col-md-7 -->
                <div class="col-md-5">
                    <div class="cart-totals style2">
                        <h3>你的订单</h3>

                            <table class="product">
                                <thead>
                                <tr>
                                    <th>食材名称</th>
                                    <th>总价</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="order:${carts}">
                                    <td th:text="${order.foodName}"></td>
                                    <td th:text="${order.totalPrice}"></td>
                                </tr>

                                </tbody>
                            </table><!-- /.product -->
                            <table>
                                <tbody>
                                <tr>
                                    <td>总价格：</td>
                                    <td class="subtotal" th:text="${totalPrice}+ '元'"></td>
                                </tr>
                                <tr>
                                    <td>运输费用：</td>
                                    <td class="btn-radio">

                                        <div class="radio-info">
                                            <input type="radio" id="free-shipping" name="radio-flat-rate">
                                            <label for="free-shipping">免费送货</label>
                                        </div>

                                    </td><!-- /.btn-radio -->
                                </tr>
                                <tr>
                                    <td>总</td>
                                    <td class="price-total" name="" th:text="${totalPrice} + '元'"></td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="btn-radio style2">

                                <div class="radio-info">
                                    <input type="radio" id="bank-transfer" name="radio-cash-2">
                                    <label for="bank-transfer">支付宝</label>
                                </div>
                                <div class="radio-info">
                                    <input type="radio" id="cash-delivery" name="radio-cash-2">
                                    <label for="cash-delivery">微信</label>
                                </div>
                                <div class="radio-info">
                                    <input type="radio" id="paypal" name="radio-cash-2">
                                    <label for="paypal">银行卡</label>
                                </div>
                            </div><!-- /.btn-radio style2 -->
                            <div class="checkbox">
                                <input type="checkbox" id="checked-order" name="checked-order" checked="">
                                <label for="checked-order">我已阅读并接受条款和条件*</label>
                            </div><!-- /.checkbox -->
                            <div class="btn-order">
                                <a style="color: #ffffff; cursor: pointer;" onclick="checkout()" class="order" title="">下订单</a>
                            </div><!-- /.btn-order -->

                    </div>
                </div><!-- /.col-md-5 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-checkout -->

    <section class="flat-row flat-iconbox style5">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Worldwide Shipping</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Order Online Service</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Payment</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Return 30 Days</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-iconbox -->
    <section class="flat-iconbox">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
    <div th:insert="~{footer :: #footer}"></div>

    <section class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="copyright"> All Rights Reserved © Techno Store 2017</p>
                    <p class="btn-scroll">
                        <a href="#" title="">
                            <img src="/images/icons/top.png" alt="">
                        </a>
                    </p>
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.footer-bottom -->

</div><!-- /.boxed -->

<!-- Javascript -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/tether.min.js"></script>
<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.circlechart.js"></script>
<script type="text/javascript" src="/javascript/easing.js"></script>
<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui.js"></script>
<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
<script type="text/javascript" src="/javascript/waves.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
<script type="text/javascript" src="/javascript/main.js"></script>

</body>
</html>
<script type="text/javascript">
    function checkout() {
        $.ajax({
            url:'/order/addOrder',
            dataType:'JSON',
            type:'POST',
            data:$("#checkoutForm").serialize(),
            success:function (result) {
                if (result.code == 200) {
                    alert(result.msg);
                    window.location.href='/page/index';
                } else {
                    alert(result.msg);
                }
            }
        });

    }
</script>
